import React from 'react';
import {Text, View} from 'react-native';
import Icon from "@ant-design/react-native/es/icon/index";
import TabBar from "@ant-design/react-native/es/tab-bar/index";
import HomePage from './home-page/home-page'
import OrderList from "./order-page/order-list";
import PersonPage from "./person/person-page";
import WhiteSpace from "@ant-design/react-native/es/white-space/index";

const tabNames = {
  'home':'首页',
  'order':'订单管理',
  'personal':'车主中心'
}
export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'home',
    };
  }

  onChangeTab(selectedTab) {
    this.setState({
      selectedTab
    });
  }

  render() {
    return (
      <View style={{backgroundColor: 'white', height: '100%'}}>
        <WhiteSpace size={'lg'}/>
        <View style={{flexDirection:'row', justifyContent:'center',
          paddingBottom:5,
          borderBottomColor:'#f5f5f5',
          borderBottomStyle: 'solid',
          borderBottomWidth: 1}}>
          <Text style={{fontSize:18}}>{tabNames[this.state.selectedTab]}</Text>
        </View>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="#f5f5f5"
        >
          <TabBar.Item
            icon={<Icon name="home"/>}
            title={<Text style={{fontSize: 12}}>首页</Text>}
            selected={this.state.selectedTab === 'home'}
            onPress={() => this.onChangeTab('home')}
          >

            <HomePage/>
          </TabBar.Item>
          <TabBar.Item
            icon={<Icon name="car"/>}
            title={<Text style={{fontSize: 12}}>订单管理</Text>}
            selected={this.state.selectedTab === 'order'}
            onPress={() => this.onChangeTab('order')}
          >
            <OrderList/>
          </TabBar.Item>
          <TabBar.Item
            icon={<Icon name="info"/>}
            title={<Text style={{fontSize: 12}}>车主中心</Text>}
            selected={this.state.selectedTab === 'personal'}
            onPress={() => this.onChangeTab('personal')}
          >
            <PersonPage/>
          </TabBar.Item>
        </TabBar>
      </View>
    );
  }
}
